<template>
  <a-modal @ok="emits('ok')" @cancel="emits('cancel')">
    <a-form
      :model="formState"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="名称" name="name">
        <a-input v-model:value="formState.name" />
      </a-form-item>
      <a-form-item label="描述" name="description">
        <a-input v-model:value="formState.description" />
      </a-form-item>
      <a-form-item label="小图" name="imgUrl">
        <div style="width: 100px; height: 100px">
          <SingleImgUpload v-model:image-url="formState.imgUrl" />
        </div>
      </a-form-item>
      <a-form-item label="大图" name="bannerUrl">
        <div style="width: 220px; height: 100px">
          <SingleImgUpload v-model:image-url="formState.bannerUrl" />
        </div>
      </a-form-item>
      <a-form-item label="类型" name="type">
        <a-select v-model:value="formState.type" placeholder="请选择类型">
          <a-select-option :value="MaterialType.IMAGE">图片</a-select-option>
          <a-select-option :value="MaterialType.VIDEO">视频</a-select-option>
          <a-select-option :value="MaterialType.MUSIC">音乐</a-select-option>
          <a-select-option :value="MaterialType.FONT">字体</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="二级类型" name="itype">
        <a-select v-model:value="formState.itype" placeholder="请选择二级类型">
          <a-select-option :value="MaterialSecType.NONE">无</a-select-option>
          <a-select-option :value="MaterialSecType.PHOTOGRAPHY"
            >摄影图</a-select-option
          >
          <a-select-option :value="MaterialSecType.AVOID_CUTOUT"
            >免抠图</a-select-option
          >
          <a-select-option :value="MaterialSecType.VECTORGRAPH"
            >设计矢量图</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item label="是否显示" name="isShow">
        <a-switch
          :checkedValue="1"
          :unCheckedValue="0"
          v-model:checked="formState.isShow"
        />
      </a-form-item>
      <a-form-item label="标签" name="tags">
        <a-select
          v-model:value="formState.tags"
          mode="tags"
          style="width: 350px"
          :token-separators="[',']"
          placeholder="输入标签按回车键或者英文逗号分隔"
        ></a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import {
  MaterialType,
  MaterialSecType,
} from '@/components/ItemList/MaterialList/types'
import { SingleImgUpload } from '@/components/Upload'
import type { DialogFormState } from '../types'

defineProps<{
  formState: DialogFormState
}>()

const emits = defineEmits<{
  (e: 'ok'): Promise<void>
  (e: 'cancel'): Promise<void>
}>()
</script>
